<template>
  <div class="searchResults-w">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="`${$route.query.value}搜索结果`"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      placeholder
    />
    <!-- 搜索结果 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        @click="$router.push({ path: '/details', query: { id: item.art_id } })"
      />
    </van-list>
  </div>
</template>

<script>
// 导入接口
import { getsearchResults } from './home.js'
export default {
  name: 'searchResults',
  data () {
    return {
      list: [], //搜索结果数组
      loading: false, //加载动画  触底后默认变为true
      finished: false, // 是否继续加载,
      page: 1
    }
  },

  methods: {
    async onLoad () {
      //   console.log(111)
      // 获取搜索结果
      let res = await getsearchResults({
        q: this.$route.query,
        page: this.page,
        per_page: 15
      })
      //   console.log(res)
      // 添加数据
      this.list.push(...res.data.data.results)
      this.loading = false
      // 页码自增
      this.page++

      //判断是否已经全部加载了数据(全部加载完毕服务器会返回空列表)
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less">
.searchResults-w {
  .van-nav-bar {
    .van-nav-bar__content {
      background-color: #fff;
      .van-nav-bar__left {
        .van-icon-arrow-left {
          color: #0098fa;
        }
      }
      .van-nav-bar__title {
        color: #000;
      }
    }
  }
}
</style>
